<?php $this->headScript()->appendFile($this->js('plugins/jquery.selectboxes.js'))
->appendFile($this->js('plugins/jquery.form.js'))
->appendFile($this->js('plugins/jquery.alerts.js'))
->appendFile($this->js('jquery-ui/ui/jquery.ui.sortable.js'))
->appendFile($this->js('jquery-ui/ui/jquery.ui.draggable.js'))
->appendFile($this->js('jquery-ui/ui/jquery.ui.resizable.js'))
->appendFile($this->js('jquery-ui/ui/jquery.ui.dialog.js'))
->appendFile($this->js('jquery-ui/ui/jquery.ui.checkbox.js'));
$this->headLink()->appendStylesheet($this->js('css/jquery.alerts.css'))
->appendStylesheet($this->js('css/ui.checkbox.css'))
->appendStylesheet($this->Css('table.css'));
?>
<style>
#select-class-area,#student-list-area {float:left}
.select-student{background:#ccc}
.selected{background: #ffa}
.fg-button{margin:5px; }
</style>
<script>
$(document).ready(function(){
	// 取年級課程
    function getSubject() {
         $("#append-area").hide();
        $.get('<?php echo $this->route("get-subject")?>',
                {grade: $("#select-grade").val()},
                function(data) {
                    $("#select-subject").html(data);
                });
    }

	$("#select-subject").change(function(){
	    var sn = $(this).val();
	    $.get('<?php echo $this->route("get-students")?>',{
	    	   sn: sn
		    },function(data){
		        $("#student-data").html(data);
			});
		if ($(this).val() !='')
			   $("#appendStudentBtn").removeClass('ui-state-disabled');
		else
	       $("#appendStudentBtn").addClass('ui-state-disabled');
	});
    // 年級改變時
    $("#select-grade").change(function(){
         $("#append-area").hide();
        getSubject();
         $("#student-data").html('');
         $("#appendStudentBtn").addClass('ui-state-disabled');
    });

    // 新增學生
    $("#appendStudentBtn").click(function(){
        if ($(this).hasClass('ui-state-disabled'))
            return false;
        $.get("<?php echo $this->route('get-new-student')?>",
            {
            grade: $("#select-grade").val(),
            group_sn: $("#select-subject").val()
            },
             function(data){
                 $("#sel-title").html($("#select-subject :selected").text());
                 $('#sel-content').html(data);
            });
        $('#dialog').dialog('open');

        });

    $("#studentNumber").change(function(){
        var id = $(this).val();
        var gradeSn = $("#select-grade").val();
        var subjectSn = $("#select-subject").val();
        $.post("<?php echo $this->route('append-by-number')?>",
                {id: id, gradeSn :gradeSn, subjectSn:subjectSn},
                 function(data){
                    if (data)
                        alert('<?php echo $this->translate("double set")?>: '+data);
                    $("#select-subject").trigger('change');
                    $("#studentNumber").val('');
                },
                'json'
                );
       });

    getSubject();
    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        width:600,
        height: 500,
        modal: true
    });
});
</script>
<style>
#student-data table {margin:5px; text-align:center;}
</style>
<div id="top-select-area">
<select id="select-grade" name="group_sn">
<?php echo $this->ClassGradeOptions()?>
</select>
<select id="select-subject" name="select-subject">

</select>
<input type="button"  id="appendStudentBtn" class="fg-button ui-state-default ui-state-disabled ui-corner-all "
value="<?php echo $this->translate('append student')?>" style="margin:1px;font-size:11px;" />
<p>
<input type="text"  id="studentNumber" size=20 />
<label for="studentNumber"><?php echo $this->translate('append memo')?></label>
</p>
</div>

<div id="student-data">

</div>
<div style="clear:both"></div>

<div id="dialog" title="<?php echo $this->translate('append student')?>">
<div id="sel-title" class="ui-widget ui-widget-content ui-corner-all" style="padding:3px"></div>
    <div id="sel-content"></div>
</div>

